<template>
	<zui-box types="2">
		<!-- 头部导航 -->
		<zui-navbar :have_back="false" title="登录" bg="transparent"></zui-navbar>

		<view style="height:126rpx">
			<!--占地高度 -->
		</view>
		<!-- 头像 -->
		<view class="avatar_box">
			<zui-avatar size="226rpx" color="#9D97A7"></zui-avatar>
		</view>

		<view style="height:112rpx">
			<!--占地高度 -->
		</view>

		<view class="zui-form">
			<view class="zui_input">
				<u-input v-model="mobile" maxlength="11" shape="circle"
					:prefixIcon="require('@/static/img/input_icon03.png')" placeholder="账号" border="none" color="#fff"
					clearable></u-input>
			</view>
			<view class="zui_input">
				<u-input v-show="!is_password" v-model="password" :prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle" placeholder="请输入登录密码" border="none" clearable color="#fff" 
					:readonly="!mobile">
					<template slot="suffix">
						<u-icon v-if="is_password" @click="is_password = false"
							:name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_password" @click="is_password = true"
							:name="require('@/static/img/eye02.png')"></u-icon>
					</template> 
				</u-input>
		
				<u-input v-show="is_password" v-model="password" :prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle" placeholder="请输入登录密码" border="none" clearable color="#fff" :password="true"
					:readonly="!mobile">
					<template slot="suffix">
						<u-icon v-if="is_password" @click="is_password = false"
							:name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_password" @click="is_password = true"
							:name="require('@/static/img/eye02.png')"></u-icon>
					</template> 
				</u-input>
			</view>
		</view>

		<view style="height:78rpx">
			<!--占地高度 -->
		</view>
		<view class="text_button_box">
			<view class="zui-check" style="padding: 30rpx;" @click="is_remember = !is_remember">
				<u-icon v-if="is_remember" :name="require('@/static/img/check01.png')"></u-icon>
				<u-icon v-if="!is_remember" :name="require('@/static/img/check02.png')"></u-icon>
				<view class="text">记住密码</view>
			</view>
			<view class="link" @click="xz_go('forget')">找回密码</view>
		</view>

		<zui-button @fun="save">登录</zui-button>
		<!-- <view class="btn_box">
			<button @click="save" class="anBtn">授权登录</button>
		</view> -->
		<view class="link_btn">
			<view class="text" @click="xz_go('register')">注册</view>
		</view>

		<view class="foot_text">
			<view class="zui-check" style="padding: 0;" @click="is_agree = !is_agree">
				<u-icon v-if="is_agree" :name="require('@/static/img/check03.png')"></u-icon>
				<u-icon v-if="!is_agree" :name="require('@/static/img/check04.png')"></u-icon>
				<view class="text">我已阅读并同意</view>
			</view>
			<view class="link" @click="$refs.zui_pop.do_open()">《注册协议》</view>
		</view>


		<zui-pop :title="info.agreement_name" :fun="set_agree" ref="zui_pop">
			<view v-html="info.agreement_detail"></view>
		</zui-pop>

		<!-- 	loading.gif -->
		<u-loading-page loadingColor='#24193d' bg-color="transparent" loadingText='正在登录中...' :loading='is_loading'>
		</u-loading-page>


		<view style="height:150rpx">
			<!--占地高度 -->
		</view>



	</zui-box>
</template>
<script>
	export default {
		data() {
			return {
				mobile: '', //账号
				password: '', //密码
				device_id: '', //设备号
				is_password: true, //是否是密码
				is_remember: false, //是否记住密码
				is_agree: false, //是否同意用户协议
				info: {},
				is_loading: false, //是否在登录中

			};
		},
		onLoad() {
			this.getinfo();
		},
		onShow() {
			let that = this;

			//获取存储的信息
			uni.getStorage({
				key: 'jql_login',
				success: (res) => {

					that.mobile = JSON.parse(res.data).j_mobile;
					that.password = JSON.parse(res.data).j_password;
					that.is_remember = JSON.parse(res.data).is_remember;
					that.is_agree = JSON.parse(res.data).is_agree;
				}
			});


			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.device_id = res.deviceId;
				}
			});
		},
		methods: {
			getinfo() {
				uni.$u.http
					.get('/app/agreement/detail?id=1', {
						custom: {
							auth: false,
							toast: true,
							catch: true
						}
					})
					.then(res => {
						this.info = res;
					})
					.catch(err => {});
			},
			save() {
				if (!this.mobile) {
					return this.say('请输入账号');
				}
				if (!this.password) {
					return this.say('请输入密码');
				}
				if (!this.is_agree) {
					return this.$refs.zui_pop.do_open();
				}


				let that = this;

				this.is_loading = true

				uni.$u.http
					.get('/app/login/login', {
						params: {
							mobile: this.mobile,
							password: this.password,
							device_id: this.device_id
						},
						custom: {
							auth: false,
							toast: true,
							catch: true
						}
					})
					.then(res => {

						that.xz_set('token', res.token);
						//记住密码
						if (that.is_remember) {
							let obj = {}
							obj.j_mobile = that.mobile;
							obj.j_password = that.password;
							obj.is_remember = that.is_remember;
							obj.is_agree = that.is_agree;

							uni.setStorage({
								key: 'jql_login',
								data: JSON.stringify(obj)
							});

						}
						//清楚密码
						if (!that.is_remember) {

							uni.removeStorage({
								key: 'jql_login', //本地缓存中的指定的 key
								success(res) { //接口调用的回调函数
									console.log('移除成功');
								}
							})

						}

						setTimeout(() => {
							that.xz_home('index');
						}, 1500);
						setTimeout(() => {
							that.is_loading = false;
						}, 2000);



					})
					.catch(err => {
						this.is_loading = false
						console.log('处理', err);
					});

				console.log('执行了没有');
			},

			set_agree() {
				this.is_agree = true;
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/.u-loading-page__warpper {
		justify-content: center;
		align-items: center;
		color: #c8c8c8;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx;
		padding: 60rpx;

		.u-loading-page__warpper__text {
			line-height: 3;
			font-size: 28rpx !important;
		}

	}


	.avatar_box {
		display: flex;
		justify-content: center;
	}

	.zui-form {
		padding: 0 60rpx;

		.zui_input {
			box-sizing: border-box;
			padding: 0 20rpx;
			border-radius: 104rpx;
			// width: 622rpx;
			background: #3a3050;
			height: 104rpx;
			margin-bottom: 20rpx;

			/deep/.u-input__content__field-wrapper__field {
				// background: red !important;
				height: 104rpx !important;
			}

			/deep/.u-icon__img {
				padding: 24rpx !important;
			}

			/deep/.u-input__content__prefix-icon {
				margin-right: 0;
			}
		}
	}

	.zui-check {
		display: flex;
		align-items: center;
		padding: 30rpx;
		height: 30rpx;


		.text {
			padding: 0 0 0 12rpx;
			line-height: 2;
		}

	}


	.text_button_box {
		font-size: 30rpx;
		color: #9d97a7;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.link {
			padding: 30rpx;
		}
	}

	//链接按钮
	.link_btn {
		display: flex;
		justify-content: center;

		.text {
			border-radius: 10rpx;
			font-size: 30rpx;
			color: #9d97a7;
			padding: 30rpx;
			display: inline-block;
		}
	}

	.foot_text {
		width: 100%;
		font-size: 30rpx;
		color: #9d97a7;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.link {
			padding: 30rpx 0;
			color: #F1B863;
		}

	}
</style>
